<template>
  <el-button @click="getCaptcha" :disabled="isGetting">
    <span v-show="!isGetting">获取验证码</span>
    <span v-show="isGetting">重新获取({{countDown}}s)</span>
  </el-button>
</template>

<script>
import { sendEmailCaptcha } from "@/api/auth/user";

export default {
  name: "GetMailCaptchaButton",
  props: {
    qqEmail: String
  },
  data() {
    return {
      isGetting: false,
      timer: '',
      countDown: 60
    }
  },
  methods: {
    getCaptcha() {
      this.isGetting = true
      this.start()
      sendEmailCaptcha({
        qqEmail: this.qqEmail
      }).then(res => {
        if(res.data.code === 200) {
          this.$message.success(res.data.message)
        } else {
          // this.$message.error(res.data.message)
        }
      })
    },
    start() {
      this.countDown = 60
      this.timer = setInterval(this.handleChange, 1000)
    },
    handleChange() {
      this.countDown --
      if(!this.countDown) {
        this.finish()
      }
    },
    finish() {
      clearInterval(this.timer)
      this.isGetting = false
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>
